/** @jsxImportSource @emotion/react */
import * as React from "react";
// import PropTypes from "prop-types";
import cx from "classnames";
import { MutableRefObject,  useContext} from "react";
import {useMeasure} from "./Hooks/use-measure";
import {PanelEnlargeCtx, useMMenuBarOcup} from "./MainMenuBar";
// import {useMeasure} from "customize-easy-ui-component/esm/Hooks/use-measure";
// import {PanelEnlargeCtx, useMMenuBarOcup, } from "customize-easy-ui-component";


/**编辑器每一行的拼装：列式布局。
 布局子孙都是平等的，宽度都平均分配，预期高度在同一行排列也是均衡整齐或高度一致的，
 父窗口宽度不确定的， 具体显示几个列是自适应的，最多列数固定。
 列数动态确定， 之后的子孙实际宽度都是铺满的100%。
 不使用滚动条的，大尺寸元素上 都没有固定数值的px;
 子孙的宽度没有固定px的，布局组件的子孙都是可在宽度上做自适应的。只有目标多少列排列是敲定固定的，也就是预期最大父窗口宽度场合可以安排最多几个列的元素。
 宽度上 竟然小到了1列都放不下了， fitable=true传递给子孙；
 子孙输入Line组件的断线折腰宽度在布局组件上就的设置switchPx参数。
 布局组件来传递进来布局紧凑与否参数fitable。也就是遇到最小最小的父窗口宽度情形，在只安排单列元素场合下的，给输入Line组件紧凑提示。
 最后一行：非满格的 落单子孙个数， 居中？，宽度协调一致。
 最多列数是应用场景 程序敲定， 大概会放得下几个列啊{已经考虑了需求上级大的布局切换需求后，反正就是最大可能性几个列}。
 【特点】对比css自带的原生的grid 、列式 、flexBox等布局模式会更加的适合 自适应，没有生硬缺点，灵活性好，还得支持打印时没毛病。
 */
interface LineColumnProps extends React.HTMLAttributes<HTMLDivElement> {
    /**当前常见最大屏幕使用环境下的,按照本组件布局能安排下的最大的列数。
     * 默认breaks 布局断点数的 列数安排： must >=1 and <=8 但是若定义breaks不限制的；
     * 设置了column就不需要配置breaks；但是column比breaks优先级底。两个都配的否则优先看的。
     *  */
    column?: number;
    //根据换行px数 ，来切换显示2个显示模式。 缺省>=360px 正常模式，否则紧凑模式。
    //switchPx == breaks[0] 假如父窗口太小 小于1个列的，小于breaks[0] 就是紧凑模式,
    //自定义； 列数调整实际的父窗口宽度px,每个列一个。
    //实际屏幕（假定LineColumn铺满了父辈DIV也就是左右半边的页面全用上的），这个假定条件下的每一个单独的项目列的恰当宽度安排所应该拆分的breakpoints分解点,每跳过以一个阈值就增加一列的，最少也1列。
    /**自定义； 优先级更高的。设置了breaks就不需要配置column；
     * 自定义的 breaks
     * */
    breaks?: number[];
    /** The contents of the layer */
    children: React.ReactNode;
    /**LineColumn自己在屏幕的宽度占比百分比。很多容器不是浏览器Tab/Viewpoint的宽度100%的。
     * 如果percent没有配置的，会启动默认机制：也就是接受useContext(PanelEnlargeCtx)的安排假设取值：
     * 【限制】点击打印预览打印的切换时，percent不要变动，可打印页数在预览render之前就被限定敲定了。所以会有问题的。
     * percent===0就不显示的。
     * percent比context优先的；
     * */
    percent?: number;
    /**不采信外部直接控制的，没有配置percent的情形：约定的框架页面位置关系。
     * 在左半边的框架页面之内的，而非右边的半边页面内的
     * 启用useContext(PanelEnlargeCtx)+useMMenuBarOcup+inLeft的设置，
     * 若设置inLeft就不要再设置percent，后者参数percent的优先级更高的！
     * context上下文的；优先级低于percent配置。
     * */
    inLeft?: boolean;
}

/**替换旧的 validChildrenMap ； 【来由】代码里面经常出现逻辑render { boolean && <> nodes </> }这样子的会导致以前普通办法失效。
 * 可支持把被<></>包裹下的组件直接合并给上一级的级别来作为并列的儿子，只支持第一层的非嵌套的<></>标签。
 * 避免相同的key就报错，但是有副作用后果：把全部儿子的key 统一再做个修改。 "_N**"作为排他性的key;
 * */
export function validChildrenFragmentSpread(children: any) {
    let idseq=1;
    let outs: React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[]=[];
    let sons=React.Children.toArray(children);
    sons.forEach((son: any, index:number, array: any) =>{
        if(React.isValidElement(son)){
            const descriptor=Object.getOwnPropertyDescriptor(son, 'type');
            if(( descriptor?.value === Symbol.for('react.fragment') )  &&  son.props  &&  son.props.hasOwnProperty("children")){
                const subChildren=Object.getOwnPropertyDescriptor(son.props, 'children');
                let nestSubNodes=React.Children.toArray(subChildren?.value);
                nestSubNodes.forEach((subnode: any, index:number, array: any) => {
                        //if( !(subnode.hasOwnProperty("key")) ||  subnode.key===`.0` ...?等 ? )
                        //Cannot assign to read only property 'key' of object '#<Object>' Object.assign(subnode,{ key: '_'+idseq });
                        //避免相同的key 就报错的情况。?和上一级的兄弟节点相同的id。
                    let modifyNode={...subnode};
                    Object.assign(modifyNode,{ key: '_N'+idseq });
                    outs.push( modifyNode );
                    idseq++;
                });
            }
            else{
                outs.push(son);       //前提假设： son该不会出现"_N**"作为key;
            }
        }
    } );
    return outs;
}


//默认 提供的breaks ： <LineColumn column={2} breaks={[288, 520]}；
//【问题】依据体验感觉的数据不一定准，显示的等效像素数时代变迁！；
//可以安排几个列 :要每列相等宽度，每一行高度也一相等的，最大支持8列（8块一排的）有意义的用途：编辑器某项目？。不是表格某一列的用途
//考虑到滚动条宽度或有或消失的扰动, 窗口大小可能遭遇的布局和测量扯皮死循环,通常手机屏幕宽度避免掉入;
//不同于css自身提供的 列式布局 grid布局的 按固定px数字平均拆分的做法,或者依据MediaQuery范围@media (min-width区间来分配固定列数做法，这里的数组配置是依据屏幕大小来适当修订的；
const defaultBreakOf=[
    [800],
    [360,1340],
    [360,1000,1600],
    [360,720,1130,1600],
    [300,610,900,1350,1650],        // column=5;
    [220,420,730,1100,1400,1700],
    [200,380,700,940,1280,1510,1800],
    [170,340,590,790,1020,1300,1580,1880],      //默认的配置最多支持八个，但也能允许自己扩展更多个的。
];

/**【3种思路】如何避免依据屏幕宽度做动态布局的效果，在遇到打印切换时刻，打印预览太草率地限定了纸张页数所导致的问题。
 * 1：每个LineColumn出现地方都应该配置打印A4。A4横板的。A3?几个常见打印目的地纸张的正常应该的效果：也就是suitableCls大小{a4:,a4L:,a3,}。
 * 2：直接约束准备打印浏览器的窗口宽度做法。
 * 3：完整的用css来调整的？【确保打印的正确性需要】只用css，不用JS做动态内容？测量div宽度做自适应的危险；
 * 重新加载？打印敲定页数之后才会再一次render的。根本没机会计算ref.div最新宽度甚至用beforePrintHandler来setSuitableCls也没有机会提前调整。
 * printComp[]；
 * 手机上chrome打印可能有些问题；
 * 若使用固定大小列style={{columnWidth: '270px', columnGap: '20px'}}布局，大小屏幕宽度缩放适应性不好，水平方向没法对齐，感觉凌乱！。
 * 若采用style={{display: 'grid', gridTemplateColumns: 'auto auto auto'}}，也有问题：列数量不能固定啊。
 * 1：2 1：1 框架调整，右边还是左边的半边框，默认编辑区底下空间100%，屏幕媒体宽度。应该部署有几个列的？？
 * 可能 useContext(PanelEnlargeCtx) 没有提供也行。
 * 原生css grid做法：没法提供percent来自适应，这个组件可能嵌套在其他组件内部一部分空间宽度内，而不是浏览器viewpoint屏幕宽度,不管本组件父辈宽的还是窄的都能适配啊。
 * 这就是@media (min-width:的局限性了；纯粹用css动态的好处就是打印没问题；但是组件可能在框架底下的一小部分宽度区域，也可能放大全占满宽度的上下文context完全没给纯粹CSS晓得啊。js和css没法互联互通;
 * 可以嵌套使用。【注意】grid repeat(n, auto)的效果/嵌套的：可能尺寸并不一定绝对保证等分的。有可能有些列宽度稍微小，而有些列宽度稍微大的布局，总体还算感觉比较靠谱和可用。
 * 若直接用grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));缺点是如果儿子只有数量多的情况，就只能接近用200px宽度大小；儿子数较少{countofsons<屏幕/200px>}的没毛病。
 * 另外：指定区域 grid-template-areas: "header header header"
 *                      "main main sidebar"
 *                      "footer footer footer";
 *      诸如 grid-row-start: 4 A; grid-column-start: span 4;  grid-row-end: B; grid-column-end: D;
 * 这样的css才是真正二维度的布局，【本质上】这没涉及grid真正二维用法，只用到一维度布局能力部分，和flexbox对等的布局能力部分。
 * */
export const LineColumn =(
    {
        column: defaultColumn=4,
        children,
        breaks=defaultBreakOf[defaultColumn-1],
        inLeft,
        percent,
        ...other
    }:LineColumnProps
) => {
    const contextPanel=useContext(PanelEnlargeCtx);
    const { carousel } = useMMenuBarOcup(false);
    //（全部列的）Viewpoint屏占比 系数
    let vppercent;
    if(percent!==undefined)   vppercent=percent;       //不启用useContext(PanelEnlargeCtx)+useMMenuBarOcup+inLeft的设置，采信外部直接控制的。
    else{
        const {enlarge } =contextPanel||{};
        //enlarge两半边的宽度协调:左边没有=0，1：左边右边1比2， 2： 1比1， 3： 2比1， 4：右边没有。
        vppercent= inLeft? (enlarge===1? 0.33: enlarge===3? 0.66: enlarge===2? 0.5 : 1) :
            (enlarge===1? 0.66: enlarge===3? 0.33: enlarge===2? 0.5 : 1);
        if(contextPanel===null || carousel)   vppercent=1;     //没有拆分为两个半边页面的框架形式，独立全撑开的页面。
        // console.log("打enlarge触发vppercent=",vppercent,enlarge,carousel);
    }
    //最大屏幕 可放下 安排 最多几个列数的； 非线性地比例降低列数?
    const column=breaks?.length;
    if(!column || column<1)     throw new Error("number of columns must >=1");
    const valChilds=validChildrenFragmentSpread(children);

    const itemCount =valChilds?.length;
    /**反过来预设赋值 倒推合理的断开点;
     * 依据vppercent断定合适的CSS,
     * [本质]就是动态对CSS做修改的。能支持；
     * */
    const mediaQueries = React.useCallback((vppercent:number) => {
        if(vppercent<=0)   return {
            visibility: 'hidden'
        };
        const breakv=breaks.map(px=>Math.round(px/vppercent));
        let csobj={} as any;
        for(let p=0;p<column-1;p++){
            let key='@media (min-width: '+breakv[p]+'px) and (max-width: '+(breakv[p+1]-1)+'px)';
            let col=p+1;
            csobj[key]={
                gridTemplateColumns: 'repeat('+(itemCount<col? itemCount : col)+', 1fr)',
            };
        }
        let key='@media (min-width: '+breakv[column-1]+'px)';
        csobj[key]={
            gridTemplateColumns: 'repeat('+(itemCount<column? itemCount : column)+', 1fr)',
        };
        // console.log("mediaQueries会了vppercent=",vppercent,breaks, csobj);
        return  csobj;
    }, [column,itemCount,breaks]);

    return (<div css={{
        display: 'grid',
        gridTemplateColumns: 'auto',
        //【自适应】grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));  列宽度固定的。宽屏幕窄屏幕没有区分对待。
        ...mediaQueries(vppercent),
    }}
                 {...other}
    >
        {valChilds}
    </div>);
};

interface ColumnWidthProps extends React.HTMLAttributes<HTMLDivElement> {
    /**最少多少px , 也可能实际的100%宽度比clnWidth还要小的情况；
     *  */
    clnWidth?: number;
}
/**列布局，简单点看看； clnWidth限定死了，【缺点】适应性较差了！！ 大屏幕 小屏幕不会适当地扩张大；限制太死了！。
 * 感觉适合本组件的儿子个数很少的情况。等同于flexBox布局中的minWidth={};
 * grid布局——栅格布局  https://blog.csdn.net/weixin_41192489/article/details/115588135
 * */
export const ColumnWidth =(
    {
        clnWidth=300,
        children,
        ...other
    }:ColumnWidthProps
) => {
    const valChilds=validChildrenFragmentSpread(children);
    //grid-template-columns:;  列宽度固定的。宽屏幕窄屏幕没有区分对待。  300px 固定的；空间多过一整行的，宽度都只有固定大小也就仅有clnWidth多一丁点的宽度。
    return (<div css={{
        display: 'grid',
        gridTemplateColumns: `repeat(auto-fit, minmax(min(${clnWidth}px, 100%), 1fr))`,
    }}
       {...other}
    >
        {valChilds}
    </div>);
};


/**被动态网页的打印给折腾的：
 重新加载？打印敲定页数之后才会再一次render的。根本没机会计算ref.div最新宽度甚至用beforePrintHandler来setSuitableCls也没有机会提前调整。
 beforePrintHandler --》unmount this?重新加载
 react-to-print只会复制旧的组件页面也不能重新render的是甚至usemedia都无感知到打印。；
 【确保打印的正确性需要】只用css，不用JS做动态内容？测量div宽度做自适应的就会危险了；
 function validChildrenCount(children: any) {
 return React.Children.toArray(children).filter(child =>
 React.isValidElement(child)
 ).length;
 }
 * */

//在一行内部的空间分配比例 %：
// interface LineColumn_OLDProps extends LineColumnProps {
//     //编译器没办法支持: css={{flexWrap: 'nowrap !important'}},所以加一个参数了。
//     nowrap?: boolean;
// }

interface LineColumnFlexProps extends React.HTMLProps<HTMLDivElement> {
    /*参考div的测量宽度值;
      作为参考布局的div屏幕render语境中是绝对不能做{display:none}隐藏的,导致打印之前无法测量该div真实宽度,进一步导致布局问题,最后页数就不一致!
      这个必须提供的! ! , 不然只有宽度=0的:导致都只能是一列布局.
    * */
    refWidth: number;
    /** 默认最大可能的 布局断点数的 列数安排： must >=1 and <=8  但若配置自己定义breaks那可就不限制了，column放空；
     * 设置了column就不需要配置breaks；但是column比breaks优先级底。两个都配的否则优先看的。
     *  */
    column?: number;
    //根据换行px数 ，来切换显示2个显示模式。 缺省>=360px 正常模式，否则紧凑模式。
    //switchPx == breaks[0] 假如父窗口太小 小于1个列的，小于breaks[0] 就是紧凑模式,
    //自定义； 列数调整实际的父窗口宽度px,每个列一个。
    //实际屏幕（假定LineColumn铺满了父辈DIV也就是左右半边的页面全用上的），这个假定条件下的每一个单独的项目列的恰当宽度安排所应该拆分的breakpoints分解点,每跳过以一个阈值就增加一列的，最少也1列。
    /**自定义； 优先级更高的。设置了breaks就不需要配置column；
     * */
    breaks?: number[];
    /** The contents of the layer */
    children: React.ReactNode;
}

/**动态布局通用的: 测量某个参考DIV的宽度; 不走CSS做动态布局用的; 目的配套LineColumnFlex，或者其它用途。
 * 假设使用useReferenceWidth配置 ref div的代码点和实际关联布局组件的代码点差不多是相接近层次的, 避免长距离组件嵌套的多层次地传递参数。?太多层次的用Context方式。
 * [组别注意]返回ref绑定的div约束: 不应该出现在<div css={{display: 'none',"@media print": { display: 'unset', },}}>这样子的上下文当中的;条件render小心;
 * 看情况需在父辈做CSS设置{scrollbarGutter: 'stable'},来避免死循环，滚动条出现以及消失的布局动荡涉及的特殊情形。
 * @return [ref, width] 前面ref绑定到窗口{LineColumnFlex或者是宽度一致的其它DIV更好，不要display:none隐藏的div}，后面width直接传递给目标LineColumnFlex。
 * 【注意】返回组合是一对一配套的，测量ref对应div的宽度值，会动态响应变化的。跨越组件层层传递有点麻烦。
 * const [refMyLineC,widthMyLinec]= useReferenceWidth();        举例说明
 *      <div ref={refMyLineC}></div>
 *      <LineColumnFlex refWidth={widthMyLinec} column={7}>
 * */
export function useReferenceWidth(): [MutableRefObject<HTMLDivElement|null>, number] {
    const ref = React.useRef<HTMLDivElement>(null);
    //正常应该用的
    const rect= useMeasure(ref);

    // const rect= useMeasure(ref?.current? ref : null);       //没有加载reflc?.current的导致无法注册useResizeObserver，必须做一个三元。

    const width= rect?.width || 0;
    //返回的width时刻反馈变动;
    //这个返回的ref可以给LineColumnFlex做绑定,也能单独给任意附近宽度大小相似度高的其它div或空的div做绑定;
    return [ref, width];
};

/**需要用useReferenceWidth()配套的; flexBox做基础布局, 测量容器div宽度来自适应的。
 拉拽窗口大小可能遭遇的布局和测量扯皮死循环现象: 在css设置上 {scrollbarGutter: 'stable'} 来避免滚动条的出现和消失给宽度测量布局场景的负反馈死循环.
 动态布局大问题！ 【特别注意】！
 只用css做动态的组件和用了js脚本做动态布局的组件在打印时刻不同，比如LineColumnFlex和LineColumn的差别即使这样，
 前者在打印时刻需要约束浏览器窗口的宽度为纸张输出的宽度差不多的大小，后者可打印页数就可能和内容页数不一致，后者只用css的就不会有这个麻烦。
 就算同一个组件有可能出现：同一次打印出现两种布局状态。比如这样的：<LineColumnFlex 1> {useMediaQuery({query: 'print'}) && <LineColumnFlex 2>}的，
 前面一个是js按照浏览器打印触发之前的div宽度来布局的有5列，然而后面哪一个是按照最终纸张输出宽度来做布局的才2列，完全不一样了！但是后面第二个组件可能输出不完整的，
 因为打印纸张的输出页数实际在useMediaQuery({query: 'print'})逻辑条件成立以前就敲定了可打印纸张数量！！所以有很大问题。js动态代码简单，css动态写代码麻烦。
 就接着这个例子讲：用{useMediaQuery({query: 'print'})&&逻辑嵌套的哪些内容，就算我约束了浏览器宽度为纸张宽度以后，实际上在打印敲定输出页数时间这些逻辑嵌套的
 需要打印内容实际上也并没有计算在立刻敲定输出页数之内的，因此也必然导致打印页数丢失或不够的问题的，这个情况必须用css,除非不打印比打印语境内容占用高度还少的话。
 <div css={{"@media not print": {display: 'none'}}}>
         <LineColumnFlex  column={7} />
 </div>
 如上代码会有严重毛病：打印输出实际上只有一次机会render；useMeasure(ref还是空的)div宽度=0导致实际只有输出一列的布局，打印没机会修正了，屏幕情况可以不限次数render，
 可是打印就不行了。这种情形若改成<div css={{visibility: 'hidden', "@media print": { visibility: 'unset' } }}>是能够确保打印能正常的输出，可惜的是屏幕，
 可屏幕遇见visibility=hidden还会保留位置空间的，显然是有问题的：空间占用？太乱了。
 [碰巧遭遇死循环]断点1150门槛：内容布局4列的后能反而省掉滚动台条1165px，被改成了5列反而要加滚动条啊div宽度1148px所以跌破门槛了再次调整布局，div测量被滚动条给扯了：扯皮了。
 加上了 scrollbarGutter: 'stable', 解决布局副作用的循环地跳变问题！可能死循环。但是固定的会手机触摸屏的固定预留滚动条的位置。
 【关键毛病】打印预览敲定页数之前没有经过新render的，直接根据屏幕当前的内容来确定的页数{display:none的div也可能计算在内的}。所以：这个问题像个不定时炸弹了。
 要被作为参考布局的div屏幕render语境中是绝对不能做{display:none}隐藏的,导致打印之前无法测量该div真实宽度,进一步导致布局问题,最后页数就不一致.把跟踪参考div独立到外部去;拆解功能依赖;
 @param ref 这里参数 ref 可以是useReferenceWidth()返回的ref取值回传进来直接绑定的,或者放空也行; 而refWidth是useReferenceWidth()返回的后面宽度值。
 * */
export const LineColumnFlex =(
    {
        refWidth,
        column: defaultColumn=4,
        children,
        breaks=defaultBreakOf[defaultColumn-1],
        ref,
        ...other
    }:LineColumnFlexProps
) => {
    //最大屏幕 可放下 安排 最多几个列数的； 非线性地比例降低列数?
    const column=breaks?.length;
    if(column<1)     throw new Error("number of columns must >=1");

    const suitableCls= React.useMemo( () => {
        let i=0;
        for(;i<column;i++)
            if(refWidth < breaks[i])   break;
        return i;
    }, [refWidth, column, breaks ]);

    // const itemCount = React.Children.count(children);

    const valChilds=validChildrenFragmentSpread(children);
    const itemCount =valChilds?.length;
    //【问题来源】即使是display:none div包裹的情况suitableCls<=0，也应该争取设置即将要布局显示的内容，这些内容直接【决定了】打印预览的页数多少的，点击打印之后再做修改已经太迟了。
    const items = valChilds.map((item, index) => {
        return item && React.cloneElement(item as any, {
            className: cx(['LineColumn-item',
                index === itemCount - 1 ? 'Litem-last' : ''
            ] ),
            style: {flex: `1 1 ${Math.floor(10000/suitableCls)/100}%` },
        })
    });

    //不能用Math.round(10000/suitableCls)/100来计算flex %，累计会超出100%的。造成实际布局少一列可能。
    const lineSum= Math.ceil(itemCount/suitableCls);

    const fakeSons=lineSum*suitableCls-itemCount;
    //必须加一层div{{ position: 'relative' }}，后面给出的父辈Div宽度width才对的。
    return (<div  ref={ref}
                  style={{display: 'flex',flexWrap: 'wrap',position: 'relative',justifyContent:'center',width: '-webkit-fill-available'}}
                  {...other}
    >
        { items }
        {suitableCls>0 && fakeSons>0 && (new Array(fakeSons)).fill(null).map((each,clm) => {
                return <div key={clm}
                            css={{ flex: `1 1 ${Math.floor(10000/suitableCls)/100}%` }}
                />;
            }
        )
        }
    </div>);
};


/**矛盾重重的版本, 没法完美解决的旧版本;  reflc没有抽离出去的;不用useReferenceWidth()配套;
 * */
const LineColumnFlex_OLD =(
    {
        refWidth,
        column: defaultColumn=4,
        children,
        breaks=defaultBreakOf[defaultColumn-1],
        ...other
    }:LineColumnFlexProps
) => {
    const reflc = React.useRef<HTMLDivElement>(null);
    const column=breaks.length;
    if(column<1)     throw new Error("number of columns must >=1");
    if(refWidth<=0)     throw new Error("参考div宽度必须>0");
    const suitableCls= React.useMemo( () => {
        let i=0;
        for(;i<column;i++)
            if(refWidth < breaks[i])   break;
        return i;
    }, [refWidth, column, breaks ]);
    const itemCount = React.Children.count(children);
    const lineSum= Math.ceil(itemCount/suitableCls);
    const items = React.Children.map(children, (item, index) => {
        return React.cloneElement(item as any, {
            className: cx(['LineColumn-item',
                index === itemCount - 1 ? 'Litem-last' : ''
            ] ),
            //测试 style: suitableCls<=0? {flex: `1 1 33.33%` } : {flex: `1 1 ${Math.round(10000/suitableCls)/100}%` },
            style: {flex: `1 1 ${Math.round(10000/suitableCls)/100}%` },
        })
    });
    const fakeSons=lineSum*suitableCls-itemCount;
    return (<div  ref={reflc}
                  style={{display: 'flex',flexWrap: 'wrap',position: 'relative',justifyContent:'center',width: '-webkit-fill-available'}}
                  {...other}
    >
        { items }
        {suitableCls>0 && fakeSons>0 && (new Array(fakeSons)).fill(null).map((each,clm) => {
                return <div key={clm}
                            css={{ flex: `1 1 ${Math.round(10000/suitableCls)/100}%` }}
                />;
            }
        )
        }
    </div>);
};


LineColumn.displayName = "LineColumn";
// LineColumn.propTypes = {
//     children: PropTypes.node
// };


/*css对手机小屏幕电脑大屏幕，浏览器也有特别对待的；scrollbarGutter属性手机上面没有看见滚动条占用空间的。手机上面可滚动内容最末尾一点空间最好不要安排可点击内容，最好是文字或留白，浏览器紧凑安排会调整布局可折叠部分范围。
<Global     设置例子
    styles={{
        html: {
            [theme.mediaQueries.md]: {
            },
            scrollbarGutter: 'stable', //解决布局副作用的循环地跳变问题！可能死循环。但是固定的会手机触摸屏的固定预留滚动条的位置?手机小屏幕就没必要做了不会拉拽窗口大小啊。电脑屏幕有效果。手机没感觉。
            "#root #floormenu": {
           },
        }
    }}
/>
* */
